<template>
  <div class="app-container">
    <NormalForm pageTitle="客户属性" :operateForm="queryForm" :formList="formList" :enumOpt="enumOpt"
      @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    <div class="app-container-table">
      <el-table height="415px" v-loading="loading" :data="manageList">
        <el-table-column label="序号" align="center" type="index" />
        <el-table-column label="属性类型" align="center" prop="attributeId" v-if="false" />
        <el-table-column label="属性名" align="center" prop="attributeName" />
        <el-table-column label="属性显示名" align="center" prop="attributeShowName" />
        <el-table-column label="数据类型" align="center" prop="dataType" />
        <el-table-column label="上报数据" align="center" prop="reportData">
          <template slot-scope="{ row }">
            <span>{{ row.reportData == '0' ? row.reportData == '1' ? '无数据' : '全部' : '有数据' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="预置" align="center" prop="preset">
          <template slot-scope="{ row }">
            <span>{{ ['有', '无'][row.preset] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="字典" align="center" prop="dict">
          <template slot-scope="{ row }">
            <span>{{ ['有', '无'][row.dict] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="显示状态" align="center" prop="state">
          <template slot-scope="{ row }">
            <span>{{ row.state == '0' ? row.state == '1' ? '隐藏' : '全部' : '可见' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button :disabled="scope.row.reportData !== '无数据'" size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange"></NormalPagination>
    </div>
  </div>
</template>

<script>
import { listManage, delManage } from "@/api/admin/manage";

export default {
  name: "Manage",
  data() {
    return {
      queryForm: {
        attributeName: '',
        dataType: '',
        state: '',
        reportData: '',
        attributeType: 1,
        pageNum: 1,
        pageSize: 20,
      },
      formList: [
        {
          label: '属性名',
          value: '',
          prop: 'attributeName',
          type: 'INPUT',
          emunName: '',
        },
        {
          label: '数据类型',
          value: '',
          prop: 'dataType',
          type: 'SELECT',
          emunName: 'sourceList'
        },
        {
          label: '上报数据',
          value: '',
          prop: 'reportData',
          type: 'SELECT',
          emunName: 'reportList'
        },
        {
          label: '状态',
          value: '',
          prop: 'state',
          type: 'SELECT',
          emunName: 'stateList'
        },
      ],
      enumOpt: {
        sourceList: [
          { dictValue: "STRING", dictLabel: "STRING" },
          { dictValue: "BOOL", dictLabel: "BOOL" },
          { dictValue: "LIST", dictLabel: "LIST" },
          { dictValue: "NUMBER", dictLabel: "NUMBER" },
          { dictValue: "DATETIME", dictLabel: "DATETIME" },
        ],
        reportList: [
          { dictValue: null, dictLabel: "全部" },
          { dictValue: "0", dictLabel: "有数据" },
          { dictValue: "1", dictLabel: "无数据" },
        ],
        stateList: [
          { dictValue: null, dictLabel: "全部" },
          { dictValue: "0", dictLabel: "可见" },
          { dictValue: "1", dictLabel: "隐藏" },
        ],
      },
      loading: true,
      total: 0,
      manageList: [],
    };
  },
  created() {
    this.handleQuery();
  },
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1;
      this.getListManageFn();
    },
    // 问卷重置
    handleReset() {
      this.queryForm = {
        attributeName: '',
        dataType: '',
        state: '',
        reportData: '',
        attributeType: 1,
        pageNum: 1,
        pageSize: 20,
      };
      this.getListManageFn()
    },
    /** 查询属性管理列表 */
    getListManageFn() {
      this.loading = true;
      listManage(this.queryForm).then((response) => {
        this.manageList = response.rows || [];
        this.total = response.total || 0;
        this.loading = false;
      });
    },
    // 翻页
    handleSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListManageFn()
    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getListManageFn()
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm("是否确认删除属性数据项?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delManage(row.attributeId);
        })
        .then(() => {
          this.handleQuery();
          this.$message.success("删除成功");
        });
    },
  },
};
</script>

<style scoped>
.app-container-table {
  background-color: white;
  padding: 20px;
}
</style>
